<template>
    <div class="app-container">
        <el-tabs v-model="activeName">
            <el-tab-pane label="线索分析" name="clueAnalysis"></el-tab-pane>
            <el-tab-pane label="商机分析" name="businessAnalysis"></el-tab-pane>
            <el-tab-pane label="活动分析" name="activityAnalysis">
                <el-form :model="queryParams" ref="queryRef" :inline="true">
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="dateRange" style="width: 240px" value-format="YYYY-MM-DD"
                            type="daterange" range-separator="-" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="32">
                    <el-col :xs="24" :sm="24" :md="24">
                        <div class="chart-wrapper">
                            <h3>活动总数分析</h3>
                            <div id="pieChart" style="width: 100%; height: 500px;"></div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24">
                        <div class="chart-wrapper">
                            <h3>活动有效率分析</h3>
                            <div id="barChart" style="width: 100%; height: 500px;"></div>
                        </div>
                    </el-col>
                </el-row>

                <el-table :data="list" stripe style="width: 100%" border >
                    <el-table-column prop="name" label="活动名称" width="180" />
                    <el-table-column prop="count" label="线索数量" width="180" />
                    <el-table-column prop="available" label="线索有效率" />
                </el-table>

            </el-tab-pane>
            <el-tab-pane label="渠道分析" name="channelAnalysis"></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getlist } from "../../../api/analysis/analapi"

const activeName = ref('activityAnalysis');
const queryParams = ref({});
const dateRange = ref([]);
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const getData = async () => {
    const res = await getlist({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    // console.log(res)
    list.value = res.data;
}
getData();
function handleQuery() {
    // TODO: Implement query logic
}

function resetQuery() {
    dateRange.value = [];
    // TODO: Implement reset logic
}

let pieChart = null;
let barChart = null;

const pieChartOption = () => {
    const pieChart = echarts.init(document.getElementById('pieChart'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // Example legend data, you can make it dynamic
            data: ['地推', '线上交易', '线下解说', '抖音', '1212', '其他']
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '地推' },
                    { value: 735, name: '线上交易' },
                    { value: 580, name: '线下解说' },
                    { value: 484, name: '抖音' },
                    { value: 300, name: '1212' },
                    { value: 200, name: '其他' }

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    // option.legend.data=list.value.map(item=>item.name)
    pieChart.setOption(option);
    
};

const barChartOption = () => {
    const barChart = echarts.init(document.getElementById('barChart'));
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    }
    barChart.setOption(option);
};


onMounted(() => { 
    pieChartOption();
    barChartOption();
});

</script>

<style scoped>
.app-container {
    padding: 20px;
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
}
</style>